<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>投资笔记</title>
		<link href="/resources/src/css/main.css" rel="stylesheet">
   		<link href="/resources/src/css/responsive.css" rel="stylesheet">
		<link href="/resources/src/css/projects-detail.css" rel="stylesheet">
		<link href="/resources/src/css/projects.css" rel="stylesheet">
		<link href="/resources/src/umeditor/themes/default/css/umeditor.min.css" rel="stylesheet">

	</head>
	<body class="sticky-header">
		<jsp:include page="left-slide.jsp" />
		<div class="main-content">
			<jsp:include page="header-start.jsp" />
        	<div class="row scroll-range" style="margin-right:0; margin-left:0;">
               	<jsp:include page="project-manage-left.jsp" />
               	<div class="right-box  col-xs-12 col-sm-8 col-md-9  col-lg-10 text-center">
               		<jsp:include page="project-comment.jsp" />
               		
               		<!--标题创建笔记-->
               		<div class="content-title create-note">
               			<i class="iconfont icon-tianjia1 create-btn"></i><span>创建新笔记</span>
               		</div>
               		<!--主体内容-->
               		<div class="content text-left">
               			<!--创建新笔记-->
               			<div id="new-note" class="note-editor">
               				<div class="note-bar clearfix">
               					<div class="create-people pull-left">创建人:<span>胡端彪</span></div>
               					<div class="create-time pull-left">创建时间:<span>2017年5月9日 15:11:33</span></div>
               					<div class="change-time pull-left">修改时间:<span>2017年5月9日 15:11:33</span></div>
               					<div class="pull-right">
               						<a class="save" data-toggle="tooltip" title="保存"><i class="iconfont icon-msnui-save-bold"></i></a>			
               					</div>
               				</div>
               				<div class="note-body">
               					<div id="new-editor" class="text"></div>
               				</div>
               			</div>
               			<!--笔记列表-->
               			<div class="note-list">
               				<div class="note-item">
               					<div class="note-bar clearfix">
	               					<div class="create-people pull-left">创建人:<span>胡端彪</span></div>
	               					<div class="create-time pull-left">创建时间:<span>2017年5月9日 15:11:33</span></div>
	               					<div class="change-time pull-left">修改时间:<span>2017年5月9日 15:11:33</span></div>
	               					<div class="btn-row pull-right">
	               						<a class="edit" data-toggle="tooltip" title="编辑"><i class="iconfont icon-bianji1"></i></a>	
	               						<a class="del" data-toggle="tooltip" title="删除"><i class="iconfont icon-shanchu2"></i></a>
	               					</div>
	               				</div>
	               				<div class="note-body">我生日赛风</div>
               				</div>
               				<div class="note-item">
               					<div class="note-bar clearfix">
	               					<div class="create-people pull-left">创建人:<span>张三</span></div>
	               					<div class="create-time pull-left">创建时间:<span>2017年6月9日 15:11:33</span></div>
	               					<div class="change-time pull-left">修改时间:<span>2017年6月9日 15:11:33</span></div>
	               					<div class="btn-row pull-right">
	               						<a class="edit" data-toggle="tooltip" title="编辑"><i class="iconfont icon-bianji1"></i></a>	
	               						<a class="del" data-toggle="tooltip" title="删除"><i class="iconfont icon-shanchu2"></i></a>
	               					</div>
	               				</div>
	               				<div class="note-body">我是张三</div>
               				</div>
               			</div>
               			<!--编辑笔记-->
               			<div id="edit-note" class="note-editor" style="margin-top:20px;">
               				<div class="note-bar clearfix">
               					<div class="create-people pull-left">创建人:<span>胡端彪</span></div>
               					<div class="create-time pull-left">创建时间:<span>2017年5月9日 15:11:33</span></div>
               					<div class="change-time pull-left">修改时间:<span>2017年5月9日 15:11:33</span></div>
               					<div class="pull-right">
               						<a class="save" data-toggle="tooltip" title="保存"><i class="iconfont icon-msnui-save-bold"></i></a>			
               					</div>
               				</div>
               				<div class="note-body">
               					<div id="edit-editor"></div>
               				</div>
               			</div>
               		</div>
               	</div>
           </div>
        </div>
       
        <script src="/resources/src/js/jquery-1.9.1.min.js"></script>
	    <!--<script src="/resources/src/js/jquery.nicescroll.js"></script>-->
	    <script src="/resources/src/js/main.js"></script>
	    <script src="/resources/src/js/bootstrap.min.js"></script>
	    
	    <!--百度UMeidtor-->
	    <script charset="utf-8" src="/resources/src/umeditor/third-party/template.min.js"></script>
	    <script charset="utf-8" src="/resources/src/umeditor/umeditor.config.js"></script>
	    <script charset="utf-8" src="/resources/src/umeditor/umeditor.min.js"></script>
	    <script src="/resources/src/umeditor/lang/zh-cn/zh-cn.js"></script>
	    <!--百度UMeidtor-->

	    
	    <script>
	    	
	    	$(function(){ 
	    		
	    		//提示工具
	    		$("[data-toggle='tooltip']").tooltip();	    		
	    		
	    		/*-----------------------------------
	    		* 富文本编辑器
	    		-----------------------------------*/
	    		//图标配置
	    		var $opt={toolbar:[

			            'undo redo | bold italic underline strikethrough | forecolor backcolor |',
			
			            'insertorderedlist insertunorderedlist | link unlink ' ,
			
			            '| justifyleft justifycenter justifyright justifyjustify |paragraph fontfamily fontsize',
			
			            ' | fullscreen'
			
			    ]};
	    		
	    		//创建笔记富文本编辑器
	    		var newNote = UM.getEditor('new-editor',$opt);
					newNote.setWidth('98%');
				
				//编辑笔记富文本编辑器
				var editNote = UM.getEditor('edit-editor',$opt);
					editNote.setWidth('98%');
				
				//编辑器样式
				$(".edui-body-container").css({
					width:'100%',
					height:'200px',
					minHeight:'auto'
				});
					    		
	    		/*----------------------------------------
	    		 * 创建新笔记
	    		 -----------------------------------------*/
	    		
	    		//1.创建新笔记
	    		$(".create-btn").click(function(){
	    			//关闭编辑笔记编辑器
	    			if($("#edit-note").css("display")=="block"){
	    				$("#edit-note").slideUp();
	    			}
	    			
	    			//显示创建笔记富文本编辑器
	    			if($("#new-note").css("display")=="none"){
	    				$("#new-note").find(".create-time span,.change-time span").text(timeToString());
	    				$("#new-note").slideDown();
	    			}
	    		});
	    		
	    		//2.保存新建笔记
	    		$("#new-note .save").click(function(){
	    			$("#new-note").slideUp();
	    			
	    			//获取编辑器的内容
	    			var txt=newNote.getContent();
	    			
	    			if(!(txt=="" || txt==null)){
	    				var name,time,html,$item;
	    				
	    				//创建人、创建时间、笔记内容等数据
		    			name=$("#new-note .create-people span").text();
		    			time=$("#new-note .create-time span").text();
		    			
		    			//创建新的笔记节点
		    			$item=$("<div class='note-item'></div>")
		    			
		    			html ="<div class='note-bar clearfix'>"
		               		 + "<div class='create-people pull-left'>创建人:"
		               		 + "<span>"
		               		 + name
		               		 + "</span>"
		               		 + "</div>"
		               		 + "<div class='create-time pull-left'>创建时间:"
		               		 + "<span>"
		               		 + time
		               		 + "</span>"
		               		 + "</div>"
		               		 + "<div class='change-time pull-left'>修改时间:"
		               		 + "<span>"
		               		 + time
		               		 + "</span>"
		               		 + "</div>"
		               		 + "<div class='btn-row pull-right'>"
		               		 + "<a class='edit' data-toggle='tooltip' title='编辑'>"
		               		 + "<i class='iconfont icon-bianji1'></i>"
		               		 + "</a>"
		               		 + "<a class='del' data-toggle='tooltip' title='删除'>"
		               		 + "<i class='iconfont icon-shanchu2'></i>"
		               		 + "</a>"
		               		 + "</div>"
		               		 + "</div>"
		               		 + "<div class='note-body'>"
		               		 + txt
		               		 + "</div>";
		               	
		               	//将新笔记插入到笔记列表中
		               	$item.html(html).appendTo($(".note-list"));
		               	
		               	newNote.setContent("");
	    			}
	    			
	    		});
	    		
	    		
	    		/*----------------------------------
	    		 * 删除和编辑笔记
	    		 ---------------------------------*/
	    		
	    		/**删除笔记**/
	    		$(".note-list").on("click",".del",function(){
	    			var $item;
	    				
    				$item=$(this).parents(".note-item");
	    			$item.addClass("on").siblings().removeClass("on");
	    			
	    			//从笔记列表中删除该笔记
	    			$item.remove();	
	    		});
	    		
	    		/**编辑笔记**/
	    		$(".note-list").on("click",".edit",function(){
	    			
	    			//关闭创建笔记编辑器
	    			if($("#new-note").css("display")=="block"){
	    				$("#new-note").slideUp();
	    			}
	    			
	    			var $item=$(this).parents(".note-item");

	    			$item.addClass("on").siblings().removeClass("on");
	    			
	    			//获取创建人、修改时间、修改内容等数据
	    			var name,time,oldHtml;
	    			
	    			name=$(".note-list .on .create-people span").text();
	    			time=$(".note-list .on .create-time span").text();
	    			oldHtml=$item.find(".note-body").html();
	    			
	    			//设置新建笔记的创建人、创建时间、修改时间、原内容等数据
	    			$("#edit-note .create-people span").text(name);
	    			$("#edit-note .create-time span").text(time);
	    			$("#edit-note .change-time span").text(timeToString());
					editNote.setContent(oldHtml);
					
					//显示富文本编辑器
					$("#edit-note").slideDown();
					
					//滚动到到编辑器位置
					var scroll_offset = $("#edit-note").offset();
					$("body,html").animate({
						scrollTop:scroll_offset.top+210, 
					},500);
	
	    		});
	    		
	    		/**保存编辑**/
	    		$("#edit-note .save").click(function(){
	    			
	    			var time,html;
	    			
	    			time=$(this).parents(".note-bar").find(".change-time span").text();
	    			html=editNote.getContent();
	    			
	    			//保存成功后，更改界面中笔记的显示
	    			$(".note-list .on .change-time span").text(time);
	    			$(".note-list .on .note-body").html(html);
	    			
	    			$("#edit-note").slideUp();
	    			
	    			//滚动到更改的笔记位置
					var scroll_offset = $(".on").offset();
					$("body,html").animate({
						scrollTop:scroll_offset.top, 
					},500);
	    		});
	    		
	    		
	    		
	    		//当前日期时间转字符串函数
	    		function timeToString(){
	    			
	    			var opts, d=new Date();
	    			
	    			opts={
	    				'year':d.getFullYear(),
		    			'month':d.getMonth()+1,
		    			'day':d.getDate(),
		    			'hours':d.getHours(),
		    			'minus':d.getMinutes(),
		    			'seconds':d.getSeconds()
	    			}
		    		
		    		//对opts格式化处理
	    			for(var key in opts){
	    				opts[key]=opts[key]>=10? opts[key] : "0"+opts[key];	
	    			}
		    		
		    		//转字符串
		    		return opts.year+"年"+opts.month+"月"+opts.day+"日"+" "+opts.hours+":"+opts.minus+":"+opts.seconds;
		    		
	    		};
	    		
	    	});
	    	
	    </script>
       
	</body>
</html>